<template>
  <div class="app-container">
    <SearchForm
      ref="searchForm"
      :queryParams.sync="queryParams"
      :searchFrame="searchFrames"
      :isDerive="false"
      :showAdd="true"
      :isDownload="true"
      @search="handleQuery"
      @add="handleAdd"
      @download="handleDownload"
    />

    <Table :tableData="tableData" ref="table">
      <template #operate="{ data }">
        <el-button @click="handleEdit(data)" type="text">编辑</el-button>
        <el-button @click="handleDel(data)" type="text">删除</el-button>
      </template>
    </Table>

    <pagination
      v-show="tableData.total > 0"
      :total="tableData.total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getListByPage"
    />

    <Dialog ref="Dialog" @getTableList="getListByPage"></Dialog>
  </div>
</template>

<script>
import { configTableFrame, searchFrame } from './frameData'
import Dialog from "./dialog.vue";
import { frequencyType, taskType } from "./types";
import { getTaskList, delTask } from '@/api/trainTask';
import { getProjectList } from '@/api/trainProject';

export default {
  name: "merchantConfig",
  data() {
    return {
      searchFrames: [...searchFrame],
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 列表数据
      tableData: {
        loading: false,
        columns: configTableFrame,
        total: 0,
        data: [],
      },
      frequencyType,
      taskType,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  components: {
    Dialog
  },
  created() {
    this.getAllProject();
    this.getListByPage();
  },
  methods: {
    handleDownload(){
      const data = {...this.queryParams}
      delete data.pageSize
      delete data.pageNum
      this.download('/business/project/task/export', data, `task_${new Date().getTime()}.xlsx`)
    },
    getAllProject(){
      getProjectList({
        pageNum: 1,
        pageSize: 500
      }).then((res) => {
        if(res.rows && res.rows.length >= 0){
          const list = res.rows.map((row) => {
            return {
              label: row.name,
              value: row.id
            }
          })
          this.searchFrames = [
            ...this.searchFrames.slice(0, 1),
            {
              ...this.searchFrames[1],
              options: list
            },
            ...this.searchFrames.slice(2)
          ];
        }
      })
    },
    getListByPage() {
      this.loading = false;
      const params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        ...this.queryParams
      }

      getTaskList(params).then((res) => {
        if(res.rows && res.rows.length >= 0){
          res.rows.forEach((row, index) => {
            row.num = (this.queryParams.pageNum - 1) * 10 + index + 1

          })
        }
        this.tableData.data = res.rows;
        this.tableData.total = res.total;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getListByPage();
    },
    handleAdd(){
      this.$refs.Dialog.showDialog();
    },
    handleEdit(data){
      this.$refs.Dialog.showDialog(data);
    },
    handleDel(data){
      this.$confirm(`确定删除此任务吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delTask(data.id).then(res => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getListByPage();
        })
      })
    }
  },
};
</script>
